import { Story, Canvas } from '@storybook/addon-docs';

# Managing Row Selections

Managing row selection with RDT is easy! We'll need to to a few things:

1. Manage our selected rows state
2. Toggle all row selection when an action is completed


# Clearing Row Selections

We need some hook to trigger all the selected rows to clear. If you were building your own table component, you would manage the selected rows state in some parent component, however, in our case since we to keep row management within React Data Table `clearSelectedRows` prop is provided so you can pass a toggled state.

It will be up to you to make sure you do not pass the same state twice. For example, if you set `clearSelectedRows={true}` twice, on the second update/trigger, none the rows will not be cleared, so you will need to toggle the state.

```js
function MyComponent() {
  const [selectedRows, setSelectedRows] = React.useState(false);
  const [toggledClearRows, setToggleClearRows] = React.useState(false);

  const handleChange = ({ selectedRows }) => {
    setSelectedRows(selectedRows);
  };

  // Toggle the state so React Data Table changes to clearSelectedRows are triggered
  const handleClearRows = () => {
    setToggleClearRows(!toggledClearRows);
  }

  return (
    <>
      <button onClick={handleClearRows}>
        Clear Selected Rows
      </button>
      <DataTable
        title="Arnold Movies"
        columns={columns}
        data={data}
        selectableRows
        onSelectedRowsChange={handleChange}
        clearSelectedRows={toggledClearRows}
      />
    </>
  );
};
```

# Row Selections Delete Use Case

Let's put these concepts together into a real world example. The following example allows you to manage deleting rows using `selectableRows`, `onSelectedRowsChange` and `clearSelectedRows`:

<Canvas>
  <Story id="selectable-manage-selections--manage-selections" />
</Canvas>